<template>
  <t-tooltip content="控制台">
    <t-button
      theme="primary"
      variant="text"
      shape="square"
      @click="openDrawer()"
    >
      <template #icon>
        <a-badge :count="hasNew ? 1 : 0" dot>
          <icon-bug/>
        </a-badge>
      </template>
    </t-button>
  </t-tooltip>
  <t-drawer v-model:visible="visible" header="请求日志" size="400px">
    <a-card
      v-for="record in records"
      :key="record.id"
      style="margin-bottom: 7px"
    >
      <template #title>
        <t-tag theme="warning">{{ prettyDate(record.createTime) }}</t-tag>
      </template>
      <template #extra>
        <t-tag :theme="record.code === 200 ? 'success' : 'danger'">{{
            record.code
          }}
        </t-tag>
      </template>
      <t-descriptions :column="1">
        <t-descriptions-item label="请求链接">
          <a-link>{{ record.url }}</a-link>
        </t-descriptions-item>
        <t-descriptions-item label="请求方式">
          <t-tag color="arcoblue">{{ record.method }}</t-tag>
        </t-descriptions-item>
        <t-descriptions-item label="异常消息" v-if="record.message !== ''">
          <div>{{ record.message }}</div>
        </t-descriptions-item>
        <t-descriptions-item label="操作">
          <t-space size="small">
            <t-button theme="primary" @click="openDialog('请求体', record.body)"
            >显示请求体
            </t-button
            >
            <t-button
              theme="primary"
              @click="openDialog('响应体', record.response)"
            >显示响应体
            </t-button
            >
          </t-space>
        </t-descriptions-item>
      </t-descriptions>
    </a-card>
    <template #footer>
      <div class="flex justify-between items-center">
        <t-tooltip content="控制台">
          <t-switch :model-value="vconsole != null" @change="switchVConsole()">
            <template #checked>打开</template>
            <template #unchecked>关闭</template>
          </t-switch>
        </t-tooltip>
        <t-button theme="danger" @click="clear()">清空</t-button>
      </div>
    </template>
  </t-drawer>
</template>
<script lang="ts" setup>
import {computed, ref, watch} from "vue";
import {useErrorStore} from "@/store/components/ErrorStore";
import {toDateString} from "xe-utils";
import VConsole from "vconsole";
import {useGlobalStore} from "@/store/GlobalStore";
import {showJson} from "@/utils/model/DialogUtil";

const visible = ref(false);
// 信息弹框

const hasNew = computed(() => useErrorStore().hasNew);
const records = computed(() => useErrorStore().records);

let vconsole: VConsole | null;

watch(
  () => useGlobalStore().isDark,
  (isDark) => {
    if (vconsole) {
      vconsole.setOption({
        theme: isDark ? "dark" : "light",
      });
    }
  }
);

function switchVConsole() {
  if (vconsole) {
    vconsole.destroy();
    vconsole = null;
  } else {
    vconsole = new VConsole({
      theme: useGlobalStore().isDark ? "dark" : "light",
    });
  }
}

const prettyDate = (date: Date) => toDateString(date, "yyyy-MM-dd HH:mm:ss");
const clear = () => useErrorStore().clear();

function openDrawer() {
  visible.value = true;
  useErrorStore().read();
}

function openDialog(title: string, data: any) {
  if (data === "undefined" && title === "请求体") {
    data = "没有请求体";
  }
  showJson(title, data);
}
</script>
<style scoped></style>
